<template>
	<view>
		<uni-list v-for="(item ,index) in subscribeList" :index="index" :key="index">
		 	<uni-list-item :title="item.name" :note="item.descInfo" thumb-size="lg" :rightText="item.createTime"></uni-list-item>
		</uni-list>
		<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
			<view>
		        <u--form :model="subscribeInfo" ref="uForm">
		        	<u-form-item label="预约名称" prop="name">
		        		<u-input v-model="subscribeInfo.name" />
		        	</u-form-item>
					<u-form-item label="预约描述" prop="descInfo">
						<u--textarea v-model="subscribeInfo.descInfo" placeholder="请输入内容" ></u--textarea>
					</u-form-item>
					<u-form-item label="预约类型" prop="typeId">
						<u-button v-model="subscribeInfo.typeId" v-text="typeName" @click="typeShow = true"></u-button>
					</u-form-item>
					<u-form-item label="联系电话" prop="phone">
						<u-input v-model="subscribeInfo.phone" />
					</u-form-item>
					<u-form-item label="开始时间" prop="timeS">
						<u-datetime-picker
						                :show="showStartTime"
						                v-model="subscribeInfo.timeS"
						                mode="datetime"
										@close="closeStartTime"
										@confirm="confirmStartTime"
										@cancel="cancelStartTime"
						        ></u-datetime-picker>
								<u-button @click="showStartTime = true" v-text="startTime"></u-button>
					</u-form-item>
					<u-form-item label="结束时间" prop="timeE">
						<u-datetime-picker
						                :show="showEndTime"
						                v-model="subscribeInfo.timeE"
						                mode="datetime"
										@close="closeEndTime"
										@confirm="confirmEndTime"
										@cancel="cancelEndTime"
						        ></u-datetime-picker>
								<u-button @click="showEndTime = true" v-text="endTime">选择服务结束时间</u-button>
					</u-form-item>
					
		        </u--form>
				<u-action-sheet :actions="typelist" @select="selectTypeClick" :title="typetitle" :closeOnClickOverlay="true" :closeOnClickAction="true" :show="typeShow" @close="closeType()"></u-action-sheet>
		        <u-button type="primary" @click="submit">提交</u-button>
		        		
			</view>
		</u-popup>
		<view class="bottom-btn">
			<u-button text="预约服务" type="primary" @click="show = true"></u-button>
		</view>
		
		<!-- <u-button class="bottom-btn" :type="primary" :size="mini" @click="show = true">打开</u-button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				typeName: '',
				showStartTime: false,
				showEndTime: false,
				startTime: '选择开始服务时间',
				endTime: '选择结束服务时间',
				subscribeInfo: {
					name: '',
					descInfo: '',
					timeS: Number(new Date()),
					timeE: Number(new Date()),
					subscribeStartTime: '',
					subscribeEndTime: '',
					typeId: '',
					phone: ''
				},
				typeShow: false,
				typetitle: '预约服务类型',
				typelist: [],
				subscribeList: []
			}
		},
		onShow() {
			this.getSubType();
			this.getSubscribeList();
		},
		methods: {
			open() {
			        // console.log('open');
			},
			close() {
			    this.show = false
			    // console.log('close');
			},
			submit() {
				this.apis.addSubscribe(this.subscribeInfo).then(res => {
				})
				this.show = false
				this.getSubscribeList()
				uni.navigateTo({
					url: "/pagesOne/subscribe/subscribe",
				})
			},
			getSubscribeList(){
				let uid = uni.getStorageSync("uid")
				this.apis.listByUserId({userId:uid}).then(res => {
					this.subscribeList = res
				})
			},
			closeType() {
				this.typeShow = false
			},
			selectTypeClick(item) {
				console.log("选择预约类型："+item.id)
				this.subscribeInfo.typeId = item.id
				this.typeName=item.name
			},
			getSubType() {
				this.apis.listSubscribeType().then(res => {
					this.typelist = res
				})
			},
			confirmStartTime(item) {
				console.log(item.value)
				let dateTime = new Date(parseInt(item.value))
				
				let month = (dateTime.getMonth() + 1)>9 ? (dateTime.getMonth() + 1) : '0'+(dateTime.getMonth() + 1)
				let day = dateTime.getDate()>9?dateTime.getDate() : '0'+dateTime.getDate()
				console.log("日期"+dateTime.getDate())
				let hours = dateTime.getHours()>9?dateTime.getHours(): '0'+dateTime.getHours()
				let minute = dateTime.getMinutes()>9?dateTime.getMinutes():'0'+dateTime.getMinutes()
				let second = dateTime.getSeconds()>9?dateTime.getSeconds():'0'+dateTime.getSeconds()
				this.startTime = `${dateTime.getFullYear()}-${month}-${day} ${hours}:${minute}:${second}`
				this.subscribeInfo.subscribeStartTime = this.startTime
				console.log("时间"+this.subscribeInfo.subscribeStartTime)
				this.showStartTime = false
			},
			cancelStartTime() {
				this.showStartTime = false
			},
			closeStartTime() {
				this.showStartTime = false
			},
			confirmEndTime(item) {
				console.log(item.value)
				let dateTime = new Date(parseInt(item.value))
				
				let month = (dateTime.getMonth() + 1)>9 ? (dateTime.getMonth() + 1) : '0'+(dateTime.getMonth() + 1)
				let day = dateTime.getDate()>9?dateTime.getDate() : '0'+dateTime.getDate()
				console.log("日期"+dateTime.getDate())
				let hours = dateTime.getHours()>9?dateTime.getHours(): '0'+dateTime.getHours()
				let minute = dateTime.getMinutes()>9?dateTime.getMinutes():'0'+dateTime.getMinutes()
				let second = dateTime.getSeconds()>9?dateTime.getSeconds():'0'+dateTime.getSeconds()
				this.endTime = `${dateTime.getFullYear()}-${month}-${day} ${hours}:${minute}:${second}`
				this.subscribeInfo.subscribeEndTime = this.endTime
				console.log("时间"+this.subscribeInfo.subscribeEndTime)
				this.showEndTime = false
			},
			cancelEndTime() {
				this.showEndTime = false
			},
			closeEndTime() {
				this.showEndTime = false
			}
		}
	}
</script>

<style lang="scss">
	.bottom-btn{
		position: fixed;
		bottom: 0%;
		width: 100%;
		
	}
</style>
